<template>
    <div class="bone-padding-10">
        <el-row style="margin-top:10px; margin-bottom: 20px;">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>设备管理</el-breadcrumb-item>
                <el-breadcrumb-item>终端信息</el-breadcrumb-item>
            </el-breadcrumb>
        </el-row>
        <el-row>
            <el-alert title="使用 stomp" type="success" :closable="false"></el-alert>
        </el-row>
        <el-row class='bone-top-10' :gutter='20'>
            <el-col :span='8'>
                <el-input v-model='stomp.createAlarmDest' placeholder='消息发送地址' size='small'></el-input>
                <el-button size='small' class='bone-top-10' type="danger" @click='createAlaram'>发生报警</el-button>
                
                <el-input style='margin-top:30px;' v-model='stomp.handleAlarmDest' placeholder='消息发送地址' size='small'></el-input>
                <el-button size='small' class='bone-top-10' type="primary" @click='handlerAlarm'>处理报警</el-button><br/>
                <el-button size="small" style="margin-top:30px;" @click='clearLogger'>清空日志</el-button>
            </el-col>
            <el-col :span='16'>
                <el-input type="textarea" :rows='20' placeholder="日志记录" v-model="stomp.logger"></el-input>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import '@/assets/stomp/stomp.min.js'
import '@/assets/stomp/sockjs.min.js'

// 建立连接对象（还未发起连接）
// let socket = new SockJS("http://localhost:10000/webSocketServer");
// 获取 STOMP 子协议的客户端对象
// var stompClient = Stomp.over(socket);

let socket
let stompClient
let timeConn
export default {
    data() {
        return {
            stomp: {
                isConn: false,
                subDest: {
                    deptDest: []
                },
                createAlarmDest: '',
                handleAlarmDest: '',
                memberInfo: {
                    memberId: '',
                    deptId: ''
                },
                logger: ''
            }
        }
    },
    methods: {

        //初始化
        init(){
            let userInfo = JSON.parse(localStorage.getItem('userInfo'))
            userInfo.myDeptIdList.forEach(deptId=>{
                let url = `/topic/dept/${deptId}/alarm`
                this.stomp.subDest.deptDest.push(url)
            });
            this.stomp.memberInfo.memberId = userInfo.memberId
            this.stomp.memberInfo.deptId = userInfo.deptId
            this.stomp.createAlarmDest = `/app/dept/${this.stomp.memberInfo.deptId}/alarm/create`
            this.stomp.handleAlarmDest = `/app/dept/${this.stomp.memberInfo.deptId}/alarm/handle`
        },

        //连接
        stompConn() {
            // console.log('调用连接方法')
            let _self = this
            if (!this.stomp.isConn) {
                socket = new SockJS("http://172.16.15.232:10000/webSocketServer");
                stompClient = Stomp.over(socket);
                console.log('连接不可用,重新连接中...')
                let header = {}
                header['client-id'] = this.stomp.memberInfo.memberId
                stompClient.connect(
                    header,
                    frame => {
                        this.stomp.subDest.deptDest.forEach(dest=>{
                            stompClient.subscribe(dest,(res)=>{
                                this.onMsg(dest,res.body)
                            })
                        })
                        this.stomp.isConn = true
                        console.log('连接成功')
                    }, 
                    error => {
                        console.log("连接失败");
                        this.stomp.isConn = false
                    }
                )
            }else{
                // console.log('连接可用')
            }
        },
        //收到消息
        onMsg(dest,res) {
            let msg = `收到主题[${dest}]发来的消息:\n${res}\n\n`
            this.stomp.logger = this.stomp.logger + msg
        },

        //产生报警
        createAlaram(){
            let msg = {}
            msg.deptId = this.stomp.memberInfo.deptId
            msg.memberId = this.stomp.memberInfo.memberId
            msg.content = '产生了一次报警'
            msg.type = 1
            console.log('msg',msg)
            let dest = this.stomp.createAlarmDest
            stompClient.send(dest,{},JSON.stringify(msg))
        },
        handlerAlarm(){
            let msg = {}
            msg.deptId = this.stomp.memberInfo.deptId
            msg.memberId = this.stomp.memberInfo.memberId
            msg.content = '处理了报警'
            msg.type = 2
            msg.alarmId = 1
            console.log('msg',msg)
            let dest = this.stomp.handleAlarmDest
            stompClient.send(dest,{},JSON.stringify(msg))
        },
        clearLogger(){
            this.stomp.logger = ''
        }
    },
    mounted() {
        console.log('mounted')
        this.init()
        this.stompConn()
        timeConn = setInterval(()=>{
            this.stompConn()
        },3000)
    },
    destroyed(){
        clearInterval(timeConn)
        stompClient.disconnect(()=>{
            console.log('see you again')
        })
    }

}
</script>
<style scoped>

</style>